Specifies the widget to use to automatically embed a link. The default value of this option defines that either the Media Embed or Semantic Media Embed widgets will be used, depending on which is enabled.

The general behavior:

• If a string (widget names separated by commas) is provided, then the first of the listed widgets which is registered will be used. For example, if 'foo,bar,bom' is set and widgets 'bar' and 'bom' are registered, then 'bar' will be used.
• If a callback is specified, then it will be executed with the URL to be embedded and it should return the name of the widget to be used. It allows to use different embed widgets for different URLs.

Example:

// Defines that embedSemantic should be used (regardless of whether embed is defined).
config.autoEmbed_widget = 'embedSemantic';

Using with custom embed widgets:

config.autoEmbed_widget = 'customEmbed';

Note: Plugin names are always lower case, while widget names are not, so widget names do not have to equal plugin names. For example, there is the embedsemantic plugin and the embedSemantic widget.

Read more in the documentation and see the SDK sample.

Defaults to: 'embed,embedSemantic'

Available since: 4.5

Extra vertical space to be added between the content and the editor bottom bar when adjusting editor height to content by using the Auto Grow feature. This option accepts a value in pixels, without the unit (for example: 50).

Read more in the documentation and see the SDK sample.

config.autoGrow_bottomSpace = 50;

Defaults to: 0

Available since: 3.6.2

The maximum height that the editor can assume when adjusting to content by using the Auto Grow feature. This option accepts a value in pixels, without the unit (for example: 600). Zero (0) means that the maximum height is not limited and the editor will expand infinitely.

Read more in the documentation and see the SDK sample.

config.autoGrow_maxHeight = 400;

Defaults to: 0

Available since: 3.4

The minimum height that the editor can assume when adjusting to content by using the Auto Grow feature. This option accepts a value in pixels, without the unit (for example: 300).

Read more in the documentation and see the SDK sample.

config.autoGrow_minHeight = 300;

Defaults to: 200

Available since: 3.4

Whether automatic editor height adjustment brought by the Auto Grow feature should happen on editor creation.

Read more in the documentation and see the SDK sample.

config.autoGrow_onStartup = true;

Defaults to: false

Available since: 3.6.2

Whether to automatically create wrapping blocks around inline content inside the document body. This helps to ensure the integrity of the block Enter mode.

Note: This option is deprecated. Changing the default value might introduce unpredictable usability issues and is highly unrecommended.

config.autoParagraph = false;

Defaults to: true

Available since: 3.6

Whether the element replaced by the editor (usually a <textarea>) is to be updated automatically when posting the form containing the editor.

Defaults to: true

The base Z-index for floating dialog windows and popups.

config.baseFloatZIndex = 2000;

Defaults to: 10000

The base href URL used to resolve relative and absolute URLs in the editor content.

config.baseHref = 'http://www.example.com/path/';

Defaults to: ''

Whether to escape basic HTML entities in the document, including:

•  
• >
• <
• &

Note: This option should not be changed unless when outputting a non-HTML data format like BBCode.

config.basicEntities = false;

Defaults to: true

The keystrokes that are blocked by default as the browser implementation is buggy. These default keystrokes are handled by the editor.

// Default setting.
config.blockedKeystrokes = [
    CKEDITOR.CTRL + 66, // Ctrl+B
    CKEDITOR.CTRL + 73, // Ctrl+I
    CKEDITOR.CTRL + 85 // Ctrl+U
];

Defaults to: see example

Sets the class attribute to be used on the body element of the editing area. This can be useful when you intend to reuse the original CSS file you are using on your live website and want to assign the editor the same class as the section that will include the contents. In this way class-specific CSS rules will be enabled.

config.bodyClass = 'contents';

Note: The editor needs to load stylesheets containing contents styles. You can either copy them to the contents.css file that the editor loads by default or set the contentsCss option.

Note: This setting only applies to classic editor (the one that uses iframe).

Defaults to: ''

Available since: 3.1

Sets the id attribute to be used on the body element of the editing area. This can be useful when you intend to reuse the original CSS file you are using on your live website and want to assign the editor the same ID as the section that will include the contents. In this way ID-specific CSS rules will be enabled.

config.bodyId = 'contents_id';

Defaults to: ''

Available since: 3.1

Whether to show the browser native context menu when the Ctrl or Meta (Mac) key is pressed on opening the context menu with the right mouse button click or the Menu key.

config.browserContextMenuOnCtrl = false;

Defaults to: true

Available since: 3.0.2

The default content type that is used when pasted data cannot be clearly recognized as HTML or text.

For example: 'foo' may come from a plain text editor or a website. It is not possible to recognize the content type in this case, so the default type will be used. At the same time it is clear that '<b>example</b> text' is HTML and its origin is a web page, email or another rich text editor.

Note: If content type is text, then styles of the paste context are preserved.

CKEDITOR.config.clipboard_defaultContentType = 'text';

See also the CKEDITOR.editor.paste event and read more about the integration with clipboard in the Clipboard Deep Dive guide.

Defaults to: 'html'

Available since: 4.0

Duration of the notification displayed after pasting was blocked by the browser.

Defaults to: 10000

Available since: 4.7.0

Sets GeSHi URL which, once queried with Ajax, will return highlighted code.

Check the Code Snippet GeSHi documentation for more information.

config.codeSnippetGeshi_url = 'http:\/\/example.com\/geshi\/colorize.php';

Defaults to: null

A CSS class of the <code> element used internally for styling (by default highlight.js themes, see config.codeSnippet_theme), which means that it is not present in the editor output data.

// Changes the class to "myCustomClass".
config.codeSnippet_codeClass = 'myCustomClass';

Note: The class might need to be changed when you are using a custom highlighter (the default is highlight.js). See CKEDITOR.plugins.codesnippet.highlighter to read more.

Read more in the documentation and see the SDK sample.

Defaults to: 'hljs'

Available since: 4.4

Restricts languages available in the "Code Snippet" dialog window. An empty value is always added to the list.

Note: If using a custom highlighter library (the default is highlight.js), you may need to refer to external documentation to set config.codeSnippet_languages properly.

Read more in the documentation and see the SDK sample.

// Restricts languages to JavaScript and PHP.
config.codeSnippet_languages = {
    javascript: 'JavaScript',
    php: 'PHP'
};

Defaults to: null

Available since: 4.4

A theme used to render code snippets. See available themes.

Note: This will only work with the default highlighter (highlight.js).

Read more in the documentation and see the SDK sample.

// Changes the theme to "pojoaque".
config.codeSnippet_theme = 'pojoaque';

Defaults to: 'default'

Available since: 4.4

Stores the style definition that applies the text background color.

Read more in the documentation and see the SDK sample.

// This is actually the default value.
config.colorButton_backStyle = {
    element: 'span',
    styles: { 'background-color': '#(color)' }
};

Defaults to: see source

Defines the colors to be displayed in the color selectors. This is a string containing hexadecimal notation for HTML colors, without the '#' prefix.

Since 3.3: A color name may optionally be defined by prefixing the entries with a name and the slash character. For example, 'FontColor1/FF9900' will be displayed as the color #FF9900 in the selector, but will be output as 'FontColor1'.

Since 4.6.2: The default color palette has changed. It contains fewer colors in more pastel shades than the previous one.

Read more in the documentation and see the SDK sample.

// Brazil colors only.
config.colorButton_colors = '00923E,F8C100,28166F';

config.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00';

// CKEditor color palette available before version 4.6.2.
config.colorButton_colors =
    '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +
    'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +
    'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +
    'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +
    'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';

Defaults to: see source

Defines how many colors will be shown per row in the color selectors.

Read more in the documentation and see the SDK sample.

config.colorButton_colorsPerRow = 8;

Defaults to: 6

Available since: 4.6.2

Whether to enable the Automatic button in the color selectors.

Read more in the documentation and see the SDK sample.

config.colorButton_enableAutomatic = false;

Defaults to: true

Whether to enable the More Colors button in the color selectors.

Read more in the documentation and see the SDK sample.

config.colorButton_enableMore = false;

Defaults to: true

Stores the style definition that applies the text foreground color.

Read more in the documentation and see the SDK sample.

// This is actually the default value.
config.colorButton_foreStyle = {
    element: 'span',
    styles: { color: '#(color)' }
};

Defaults to: see source

Whether the plugin should convert background CSS properties with color only, to a background-color property, allowing the Color Button plugin to edit these styles.

config.colorButton_normalizeBackground = false;

Defaults to: true

Available since: 4.6.1

The CSS file(s) to be used to apply style to editor content. It should reflect the CSS used in the target pages where the content is to be displayed.

Note: This configuration value is ignored by inline editor as it uses the styles that come directly from the page that CKEditor is rendered on. It is also ignored in the full page mode in which the developer has full control over the page HTML code.

Read more in the documentation and see the SDK sample.

config.contentsCss = '/css/mysitestyles.css';
config.contentsCss = [ '/css/mysitestyles.css', '/css/anotherfile.css' ];

Defaults to: CKEDITOR.getUrl( 'contents.css' )

The writing direction of the language which is used to create editor content. Allowed values are:

• '' (an empty string) – Indicates that content direction will be the same as either the editor UI direction or the page element direction depending on the editor type:
  • Classic editor – The same as the user interface language direction.
  • Inline editor– The same as the editable element text direction.
• 'ltr' – Indicates a Left-To-Right text direction (like in English).
• 'rtl' – Indicates a Right-To-Left text direction (like in Arabic).

See the SDK sample.

Example:

config.contentsLangDirection = 'rtl';

Defaults to: ''

Language code of the writing language which is used to author the editor content. This option accepts one single entry value in the format defined in the Tags for Identifying Languages (BCP47) IETF document and is used in the lang attribute.

config.contentsLanguage = 'fr';

Defaults to: same value with editor's UI language

Defines rules for the elements from which the styles should be fetched. If set to true, it will disable filtering.

This property is using Advanced Content Filter syntax. You can learn more about it in the Content Filtering (ACF) documentation.

config.copyFormatting_allowRules = 'span(*)[*]{*}'; // Allows only spans.
config.copyFormatting_allowRules = true; // Disables filtering.

Read more in the documentation and see the SDK sample.

Defaults to: 'b; s; u; strong; span; p; div; table; thead; tbody; ' + 'tr; td; th; ol; ul; li; (*)[*]{*}'

Available since: 4.6.0

Defines which contexts should be enabled in the Copy Formatting plugin. Available contexts are:

• 'text' – Plain text context.
• 'list' – List context.
• 'table' – Table context.

Examples:

// Enables only plain text context.
config.copyFormatting_allowedContexts = [ 'text' ];

// If set to "true", enables all contexts.
config.copyFormatting_allowedContexts = true;

Read more in the documentation and see the SDK sample.

Defaults to: true

Available since: 4.6.0

Defines rules for the elements from which fetching styles is explicitly forbidden (eg. widgets).

This property is using Advanced Content Filter syntax. You can learn more about it in the Content Filtering (ACF) documentation.

config.copyFormatting_disallowRules = 'span(important)'; // Disallows spans with "important" class.

Read more in the documentation and see the SDK sample.

Defaults to: '*[data-cke-widget*,data-widget*,data-cke-realelement](cke_widget*)'

Available since: 4.6.0

Defines the keyboard shortcut for copying styles.

config.copyFormatting_keystrokeCopy = CKEDITOR.CTRL + CKEDITOR.SHIFT + 66; // Ctrl+Shift+B

The keyboard shortcut can also be switched off:

config.copyFormatting_keystrokeCopy = false;

Read more in the documentation and see the SDK sample.

Defaults to: CKEDITOR.CTRL + CKEDITOR.SHIFT + 67

Available since: 4.6.0

Defines the keyboard shortcut for applying styles.

config.copyFormatting_keystrokePaste = CKEDITOR.CTRL + CKEDITOR.SHIFT + 77; // Ctrl+Shift+M

The keyboard shortcut can also be switched off:

config.copyFormatting_keystrokePaste = false;

Read more in the documentation and see the SDK sample.

Defaults to: CKEDITOR.CTRL + CKEDITOR.SHIFT + 86

Available since: 4.6.0

Defines if the "disabled" cursor should be attached to the whole page when the Copy Formatting plugin is active.

"Disabled" cursor indicates that Copy Formatting will not work in the place where the mouse cursor is placed.

config.copyFormatting_outerCursor = false;

Read more in the documentation and see the SDK sample.

Defaults to: true

Available since: 4.6.0

The style definition that applies the bold style to the text.

Read more in the documentation and see the SDK sample.

config.coreStyles_bold = { element: 'b', overrides: 'strong' };

config.coreStyles_bold = {
    element: 'span',
    attributes: { 'class': 'Bold' }
};

Defaults to: {element: 'strong', overrides: 'b'}

The style definition that applies the italics style to the text.

Read more in the documentation and see the SDK sample.

config.coreStyles_italic = { element: 'i', overrides: 'em' };

CKEDITOR.config.coreStyles_italic = {
    element: 'span',
    attributes: { 'class': 'Italic' }
};

Defaults to: {element: 'em', overrides: 'i'}

The style definition that applies the strikethrough style to the text.

Read more in the documentation and see the SDK sample.

CKEDITOR.config.coreStyles_strike = {
    element: 'span',
    attributes: { 'class': 'Strikethrough' },
    overrides: 'strike'
};

Defaults to: {element: 's', overrides: 'strike'}

The style definition that applies the subscript style to the text.

Read more in the documentation and see the SDK sample.

CKEDITOR.config.coreStyles_subscript = {
    element: 'span',
    attributes: { 'class': 'Subscript' },
    overrides: 'sub'
};

Defaults to: {element: 'sub'}

The style definition that applies the superscript style to the text.

Read more in the documentation and see the SDK sample.

CKEDITOR.config.coreStyles_superscript = {
    element: 'span',
    attributes: { 'class': 'Superscript' },
    overrides: 'sup'
};

Defaults to: {element: 'sup'}

The style definition that applies the underline style to the text.

Read more in the documentation and see the SDK sample.

CKEDITOR.config.coreStyles_underline = {
    element: 'span',
    attributes: { 'class': 'Underline' }
};

Defaults to: {element: 'u'}

The URL path to the custom configuration file to be loaded. If not overwritten with inline configuration, it defaults to the config.js file present in the root of the CKEditor installation directory.

CKEditor will recursively load custom configuration files defined inside other custom configuration files.

Read more about setting CKEditor configuration in the documentation.

// Load a specific configuration file.
CKEDITOR.replace( 'myfield', { customConfig: '/myconfig.js' } );

// Do not load any custom configuration file.
CKEDITOR.replace( 'myfield', { customConfig: '' } );

Defaults to: "<CKEditor folder>/config.js"

The characters to be used for indenting HTML output produced by the editor. Using characters different from ' ' (space) and '\t' (tab) is not recommended as it will mess the code.

// No indentation.
CKEDITOR.config.dataIndentationChars = '';

// Use two spaces for indentation.
CKEDITOR.config.dataIndentationChars = '  ';

Defaults to: '\t'

The language to be used if the language setting is left empty and it is not possible to localize the editor to the user language.

Read more in the documentation and see the SDK sample.

config.defaultLanguage = 'it';

Defaults to: 'en'

A setting that stores CSS rules to be injected into the page with styles to be applied to the tooltip element.

Read more in the documentation and see the SDK sample.

// This is actually the default value.
CKEDITOR.config.devtools_styles =
    '#cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }' +
    '#cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }' +
    '#cke_tooltip ul { padding: 0pt; list-style-type: none; }';

Defaults to: see example

Available since: 3.6

A function that returns the text to be displayed inside the Developer Tools tooltip when hovering over a dialog UI element.

Read more in the documentation and see the SDK sample.

// This is actually the default value.
// Show dialog window name, tab ID, and element ID.
config.devtools_textCallback = function( editor, dialog, element, tabName ) {
    var lang = editor.lang.devtools,
        link = '<a href="http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition.' +
            ( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) +
            '.html" target="_blank">' + ( element ? element.type : 'content' ) + '</a>',
        str =
            '<h2>' + lang.title + '</h2>' +
            '<ul>' +
                '<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +
                '<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';

    if ( element )
        str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';

    str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';

    return str + '</ul>';
};

Defaults to: see example

Available since: 3.6

Parameters

• editor : CKEDITOR.editor
• dialog :
• element :
• tabName :

The color of the dialog background cover. It should be a valid CSS color string.

config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)';

Defaults to: 'white'

The opacity of the dialog background cover. It should be a number within the range [0.0, 1.0].

config.dialog_backgroundCoverOpacity = 0.7;

Defaults to: 0.5

The guideline to follow when generating the dialog buttons. There are 3 possible options:

• 'OS' - the buttons will be displayed in the default order of the user's OS;
• 'ltr' - for Left-To-Right order;
• 'rtl' - for Right-To-Left order.

Example:

config.dialog_buttonsOrder = 'rtl';

Defaults to: 'OS'

Available since: 3.5

The distance of magnetic borders used in moving and resizing dialogs, measured in pixels.

config.dialog_magnetDistance = 30;

Defaults to: 20

Tells if user should not be asked to confirm close, if any dialog field was modified. By default it is set to false meaning that the confirmation dialog will be shown.

config.dialog_noConfirmCancel = true;

Defaults to: false

Available since: 4.3

If the dialog has more than one tab, put focus into the first tab as soon as dialog is opened.

config.dialog_startupFocusTab = true;

Defaults to: false

Disables the built-in spell checker if the browser provides one.

Note: Although word suggestions provided natively by the browsers will not appear in CKEditor's default context menu, users can always reach the native context menu by holding the Ctrl key when right-clicking if browserContextMenuOnCtrl is enabled or you are simply not using the context menu plugin.

config.disableNativeSpellChecker = false;

Defaults to: true

Disables the "table tools" offered natively by the browser (currently Firefox only) to perform quick table editing operations, like adding or deleting rows and columns.

config.disableNativeTableHandles = false;

Defaults to: true

Disables the ability to resize objects (images and tables) in the editing area.

config.disableObjectResizing = true;

Note: Because of incomplete implementation of editing features in browsers this option does not work for inline editors (see ticket #10197), does not work in Internet Explorer 11+ (see #9317 and IE11+ issue). In Internet Explorer 8-10 this option only blocks resizing, but it is unable to hide the resize handles.

Defaults to: false

Disables inline styling on read-only elements.

Defaults to: false

Available since: 3.5

Disallowed content rules. They have precedence over allowed content rules. Read more in the Disallowed Content guide.

Read more in the documentation and see the SDK sample. See also allowedContent and extraAllowedContent.

Available since: 4.4

Whether to wrap the entire table instead of individual cells when creating a <div> in a table cell.

config.div_wrapTable = true;

Defaults to: false

Sets the DOCTYPE to be used when loading the editor content as HTML.

// Set the DOCTYPE to the HTML 4 (Quirks) mode.
config.docType = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">';

Defaults to: '<!DOCTYPE html>'

The e-mail address anti-spam protection option. The protection will be applied when creating or modifying e-mail links through the editor interface.

Two methods of protection can be chosen:

1. The e-mail parts (name, domain, and any other query string) are assembled into a function call pattern. Such function must be provided by the developer in the pages that will use the contents.
2. Only the e-mail address is obfuscated into a special string that has no meaning for humans or spam bots, but which is properly rendered and accepted by the browser.

Both approaches require JavaScript to be enabled.

// href="mailto:tester@ckeditor.com?subject=subject&body=body"
config.emailProtection = '';

// href="<a 
href=\"javascript:void(location.href=\'mailto:\'+String.fromCharCode(116,101,115,116,101,114,64,99,107,101,100,105,116,111,114,46,99,111,109)+\'?subject=subject&body=body\')\">e-mail</a>"
config.emailProtection = 'encode';

// href="javascript:mt('tester','ckeditor.com','subject','body')"
config.emailProtection = 'mt(NAME,DOMAIN,SUBJECT,BODY)';

Defaults to: '' (empty string = disabled)

Available since: 3.1

A template for the URL of the provider endpoint. This URL will be queried for each resource to be embedded.

It uses the following parameters:

• url – The URL of the requested media, e.g. https://twitter.com/ckeditor/status/401373919157821441.
• callback – The name of the globally available callback used for JSONP requests.

For example:

config.embed_provider = '//example.com/api/oembed-proxy?resource-url={url}&callback={callback}';

By default CKEditor does not use any provider, although there is a ready-to-use URL available via Iframely:

config.embed_provider = '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}'

However, this endpoint contains certain limitations, e.g. it cannot embed Google Maps content. It is recommended to set up an account on the Iframely service for better control over embedded content.

Read more in the documentation and see the SDK sample.

Refer to CKEDITOR.plugins.embedBase.baseDefinition.providerUrl for more information about content providers.

Important note: Prior to version 4.7 this configuration option defaulted to the //ckeditor.iframe.ly/api/oembed?url={url}&callback={callback} string.

Defaults to: ''

Available since: 4.5

Whether to enable the context menu. Regardless of the setting the Context Menu plugin is still loaded.

config.enableContextMenu = false;

Defaults to: true

Available since: 4.7.0

Allow context-sensitive Tab key behaviors, including the following scenarios:

When selection is anchored inside table cells:

• If Tab is pressed, select the content of the "next" cell. If in the last cell in the table, add a new row to it and focus its first cell.
• If Shift+Tab is pressed, select the content of the "previous" cell. Do nothing when it is in the first cell.

Example:

config.enableTabKeyTools = false;

Defaults to: true

Sets the behavior of the Enter key. It also determines other behavior rules of the editor, like whether the <br> element is to be used as a paragraph separator when indenting text. The allowed values are the following constants that cause the behavior outlined below:

• CKEDITOR.ENTER_P (1) – New <p> paragraphs are created.
• CKEDITOR.ENTER_BR (2) – Lines are broken with <br> elements.
• CKEDITOR.ENTER_DIV (3) – New <div> blocks are created.

Note: It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness. The editor is optimized for this setting.

Read more in the documentation and see the SDK sample.

// Not recommended.
config.enterMode = CKEDITOR.ENTER_BR;

Defaults to: CKEDITOR.ENTER_P

Whether to use HTML entities in the editor output.

config.entities = false;

Defaults to: true

A comma-separated list of additional entities to be used. Entity names or numbers must be used in a form that excludes the '&' prefix and the ';' ending.

config.entities_additional = '#1049'; // Adds Cyrillic capital letter Short I (Й).

Defaults to: '#39' (The single quote (') character)

Whether to convert some symbols, mathematical symbols, and Greek letters to HTML entities. This may be more relevant for users typing text written in Greek. The list of entities can be found in the W3C HTML 4.01 Specification, section 24.3.1.

config.entities_greek = false;

Defaults to: true

Whether to convert some Latin characters (Latin alphabet No. 1, ISO 8859-1) to HTML entities. The list of entities can be found in the W3C HTML 4.01 Specification, section 24.2.1.

config.entities_latin = false;

Defaults to: true

Whether to convert all remaining characters not included in the ASCII character table to their relative decimal numeric representation of HTML entity. When set to force, it will convert all entities into this format.

For example the phrase: 'This is Chinese: 汉语.' would be output as: 'This is Chinese: 汉语.'

config.entities_processNumerical = true;
config.entities_processNumerical = 'force'; // Converts from ' ' into ' ';

Defaults to: false

This option makes it possible to set additional allowed content rules for CKEDITOR.editor.filter.

It is especially useful in combination with the default allowedContent value:

CKEDITOR.replace( 'textarea_id', {
    plugins: 'wysiwygarea,toolbar,format',
    extraAllowedContent: 'b i',
    on: {
        instanceReady: function( evt ) {
            var editor = evt.editor;

            editor.filter.check( 'h1' ); // -> true (thanks to Format combo)
            editor.filter.check( 'b' ); // -> true (thanks to extraAllowedContent)
            editor.setData( '<h1><i>Foo</i></h1><p
 class="left"><b>Bar</b> <a 
href="http://foo.bar">foo</a></p>' );
            // Editor contents will be:
            '<h1><i>Foo</i></h1><p><b>Bar</b> foo</p>'
        }
    }
} );

Read more in the documentation and see the SDK sample. See also allowedContent for more details.

Available since: 4.1

A list of additional plugins to be loaded. This setting makes it easier to add new plugins without having to touch the plugins setting.

Note: The most recommended way to add CKEditor plugins is through CKEditor Builder. Read more in the documentation.

config.extraPlugins = 'myplugin,anotherplugin';

Defaults to: ''

Default file name (without extension) that will be used for files created from a Base64 data string (for example for files pasted into the editor). This name will be combined with the MIME type to create the full file name with the extension.

If fileTools_defaultFileName is set to default-name and data's MIME type is image/png, the resulting file name will be default-name.png.

If fileTools_defaultFileName is not set, the file name will be created using only its MIME type. For example for image/png the file name will be image.png.

Defaults to: ''

Available since: 4.5.3

The location of an external file manager that should be launched when the Browse Server button is pressed. If configured, the Browse Server button will appear in the Link, Image, and Flash dialog windows.

Read more in the documentation and see the SDK sample.

config.filebrowserBrowseUrl = '/browser/browse.php';

Defaults to: '' (empty string = disabled)

Available since: 3.0

The location of an external file browser that should be launched when the Browse Server button is pressed in the Flash dialog window.

If not set, CKEditor will use filebrowserBrowseUrl.

Read more in the documentation and see the SDK sample.

config.filebrowserFlashBrowseUrl = '/browser/browse.php?type=Flash';

Defaults to: '' (empty string = disabled)

Available since: 3.0

The location of the script that handles file uploads in the Flash dialog window.

If not set, CKEditor will use filebrowserUploadUrl.

Read more in the documentation and see the SDK sample.

config.filebrowserFlashUploadUrl = '/uploader/upload.php?type=Flash';(empty string = disabled)]

Defaults to: ''

Available since: 3.0

The location of an external file manager that should be launched when the Browse Server button is pressed in the Link tab of the Image dialog window.

If not set, CKEditor will use filebrowserBrowseUrl.

Read more in the documentation and see the SDK sample.

config.filebrowserImageBrowseLinkUrl = '/browser/browse.php';

Defaults to: '' (empty string = disabled)

Available since: 3.2

The location of an external file manager that should be launched when the Browse Server button is pressed in the Image dialog window.

If not set, CKEditor will use filebrowserBrowseUrl.

Read more in the documentation and see the SDK sample.

config.filebrowserImageBrowseUrl = '/browser/browse.php?type=Images';

Defaults to: '' (empty string = disabled)

Available since: 3.0

The location of the script that handles file uploads in the Image dialog window.

If not set, CKEditor will use filebrowserUploadUrl.

Read more in the documentation and see the SDK sample.

config.filebrowserImageUploadUrl = '/uploader/upload.php?type=Images';

Note: This is a configuration setting for a file browser/uploader. To configure uploading dropped or pasted files use the uploadUrl or imageUploadUrl configuration option.

Defaults to: '' (empty string = disabled)

Available since: 3.0

The location of the script that handles file uploads. If set, the Upload tab will appear in the Link, Image, and Flash dialog windows.

Read more in the documentation and see the SDK sample.

config.filebrowserUploadUrl = '/uploader/upload.php';

Note: This is a configuration setting for a file browser/uploader. To configure uploading dropped or pasted files use the uploadUrl configuration option.

Defaults to: '' (empty string = disabled)

Available since: 3.0

The features to use in the file manager popup window.

config.filebrowserWindowFeatures = 'resizable=yes,scrollbars=no';

Defaults to: 'location=no,menubar=no,toolbar=no,dependent=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes'

Available since: 3.4.1

The height of the file manager popup window. It can be a number denoting a value in pixels or a percent string.

Read more in the documentation and see the SDK sample.

config.filebrowserWindowHeight = 580;

config.filebrowserWindowHeight = '50%';

Defaults to: '70%'

The width of the file manager popup window. It can be a number denoting a value in pixels or a percent string.

Read more in the documentation and see the SDK sample.

config.filebrowserWindowWidth = 750;

config.filebrowserWindowWidth = '50%';

Defaults to: '80%'

Whether a filler text (non-breaking space entity —  ) will be inserted into empty block elements in HTML output. This is used to render block elements properly with line-height. When a function is specified instead, it will be passed a CKEDITOR.htmlParser.element to decide whether adding the filler text by expecting a Boolean return value.

config.fillEmptyBlocks = false; // Prevent filler nodes in all empty blocks.

// Prevent filler node only in float cleaners.
config.fillEmptyBlocks = function( element ) {
    if ( element.attributes[ 'class' ].indexOf( 'clear-both' ) != -1 )
        return false;
};

Defaults to: true

Available since: 3.5

Defines the style to be used to highlight results with the find dialog.

// Highlight search results with blue on yellow.
config.find_highlight = {
    element: 'span',
    styles: { 'background-color': '#ff0', color: '#00f' }
};

Defaults to: {element: 'span', styles: {'background-color': '#004', color: '#fff'}}

Add <embed> tag as alternative: <object><embed></embed></object>.

Defaults to: false

Use flashEmbedTagOnly and flashAddEmbedTag values on edit.

Defaults to: false

Save as <embed> tag only. This tag is unrecommended.

Defaults to: false

Along with floatSpaceDockedOffsetY it defines the amount of offset (in pixels) between the float space and the editable left/right boundaries when the space element is docked on either side of the editable.

config.floatSpaceDockedOffsetX = 10;

Defaults to: 0

Along with floatSpaceDockedOffsetX it defines the amount of offset (in pixels) between the float space and the editable top/bottom boundaries when the space element is docked on either side of the editable.

config.floatSpaceDockedOffsetY = 10;

Defaults to: 0

Along with floatSpacePinnedOffsetY it defines the amount of offset (in pixels) between the float space and the viewport boundaries when the space element is pinned.

config.floatSpacePinnedOffsetX = 20;

Defaults to: 0

Along with floatSpacePinnedOffsetX it defines the amount of offset (in pixels) between the float space and the viewport boundaries when the space element is pinned.

config.floatSpacePinnedOffsetY = 20;

Defaults to: 0

Indicates that the float space should be aligned to the right side of the editable area rather than to the left (if possible).

config.floatSpacePreferRight = true;

Defaults to: false

Available since: 4.5

The text to be displayed in the Font Size combo is none of the available values matches the current cursor position or text selection.

// If the default site font size is 12px, we may making it more explicit to the end user.
config.fontSize_defaultLabel = '12px';

Defaults to: ''

The list of fonts size to be displayed in the Font Size combo in the toolbar. Entries are separated by semi-colons (';').

Any kind of "CSS like" size can be used, like '12px', '2.3em', '130%', 'larger' or 'x-small'.

A display name may be optionally defined by prefixing the entries with the name and the slash character. For example, 'Bigger Font/14px' will be displayed as 'Bigger Font' in the list, but will be outputted as '14px'.

config.fontSize_sizes = '16/16px;24/24px;48/48px;';

config.fontSize_sizes = '12px;2.3em;130%;larger;x-small';

config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small';

Defaults to: see source

The style definition to be used to apply the font size in the text.

// This is actually the default value for it.
config.fontSize_style = {
    element:        'span',
    styles:         { 'font-size': '#(size)' },
    overrides:      [ { element: 'font', attributes: { 'size': null } } ]
};

Defaults to: see example

The text to be displayed in the Font combo is none of the available values matches the current cursor position or text selection.

// If the default site font is Arial, we may making it more explicit to the end user.
config.font_defaultLabel = 'Arial';

Defaults to: ''

The list of fonts names to be displayed in the Font combo in the toolbar. Entries are separated by semi-colons (';'), while it's possible to have more than one font for each entry, in the HTML way (separated by comma).

A display name may be optionally defined by prefixing the entries with the name and the slash character. For example, 'Arial/Arial, Helvetica, sans-serif' will be displayed as 'Arial' in the list, but will be outputted as 'Arial, Helvetica, sans-serif'.

config.font_names =
    'Arial/Arial, Helvetica, sans-serif;' +
    'Times New Roman/Times New Roman, Times, serif;' +
    'Verdana';

config.font_names = 'Arial;Times New Roman;Verdana';

Defaults to: see source

The style definition to be used to apply the font in the text.

// This is actually the default value for it.
config.font_style = {
    element:        'span',
    styles:         { 'font-family': '#(family)' },
    overrides:      [ { element: 'font', attributes: { 'face': null } } ]
};

Defaults to: see example

Forces the use of enterMode as line break regardless of the context. If, for example, enterMode is set to CKEDITOR.ENTER_P, pressing the Enter key inside a <div> element will create a new paragraph with a <p> instead of a <div>.

Read more in the documentation and see the SDK sample.

// Not recommended.
config.forceEnterMode = true;

Defaults to: false

Available since: 3.2.1

Whether to force all pasting operations to insert on plain text into the editor, loosing any formatting information possibly available in the source text.

Note: paste from word (dialog) is not affected by this configuration.

config.forcePasteAsPlainText = true;

Defaults to: false

Whether to force using '&' instead of '&' in element attributes values. It is not recommended to change this setting for compliance with the W3C XHTML 1.0 standards (C.12, XHTML 1.0).

// Use `'&'` instead of `'&'`
CKEDITOR.config.forceSimpleAmpersand = true;

Defaults to: false

The style definition to be used to apply the Address format.

Read more in the documentation and see the SDK sample.

config.format_address = { element: 'address', attributes: { 'class': 'styledAddress' } };

Defaults to: { element: 'address' }

The style definition to be used to apply the Normal (DIV) format.

Read more in the documentation and see the SDK sample.

config.format_div = { element: 'div', attributes: { 'class': 'normalDiv' } };

Defaults to: { element: 'div' }

The style definition to be used to apply the Heading 1 format.

Read more in the documentation and see the SDK sample.

config.format_h1 = { element: 'h1', attributes: { 'class': 'contentTitle1' } };

Defaults to: { element: 'h1' }

The style definition to be used to apply the Heading 2 format.

Read more in the documentation and see the SDK sample.

config.format_h2 = { element: 'h2', attributes: { 'class': 'contentTitle2' } };

Defaults to: { element: 'h2' }

The style definition to be used to apply the Heading 3 format.

Read more in the documentation and see the SDK sample.

config.format_h3 = { element: 'h3', attributes: { 'class': 'contentTitle3' } };

Defaults to: { element: 'h3' }

The style definition to be used to apply the Heading 4 format.

Read more in the documentation and see the SDK sample.

config.format_h4 = { element: 'h4', attributes: { 'class': 'contentTitle4' } };

Defaults to: { element: 'h4' }

The style definition to be used to apply the Heading 5 format.

Read more in the documentation and see the SDK sample.

config.format_h5 = { element: 'h5', attributes: { 'class': 'contentTitle5' } };

Defaults to: { element: 'h5' }

The style definition to be used to apply the Heading 6 format.

Read more in the documentation and see the SDK sample.

config.format_h6 = { element: 'h6', attributes: { 'class': 'contentTitle6' } };

Defaults to: { element: 'h6' }

The style definition to be used to apply the Normal format.

Read more in the documentation and see the SDK sample.

config.format_p = { element: 'p', attributes: { 'class': 'normalPara' } };

Defaults to: { element: 'p' }

The style definition to be used to apply the Formatted format.

Read more in the documentation and see the SDK sample.

config.format_pre = { element: 'pre', attributes: { 'class': 'code' } };

Defaults to: { element: 'pre' }

A list of semicolon-separated style names (by default: tags) representing the style definition for each entry to be displayed in the Format drop-down list in the toolbar. Each entry must have a corresponding configuration in a setting named 'format_(tagName)'. For example, the 'p' entry has its definition taken from config.format_p.

Read more in the documentation and see the SDK sample.

config.format_tags = 'p;h2;h3;pre';

Defaults to: 'p;h1;h2;h3;h4;h5;h6;pre;address;div'

Indicates whether the content to be edited is being input as a full HTML page. A full page includes the <html>, <head>, and <body> elements. The final output will also reflect this setting, including the <body> content only if this setting is disabled.

Read more in the documentation and see the SDK sample.

config.fullPage = true;

Defaults to: false

Available since: 3.1

Enables Grammar As You Type (GRAYT) on SCAYT startup. When set to true, this option turns on GRAYT automatically after SCAYT started.

Read more in the documentation and see the SDK sample.

config.grayt_autoStartup = true;

Defaults to: false

Available since: 4.5.6

The height of the editing area that includes the editor content. This configuration option accepts an integer (to denote a value in pixels) or any CSS-defined length unit except percent (%) values which are not supported.

Note: This configuration option is ignored by inline editor.

Read more in the documentation and see the SDK sample.

config.height = 500;        // 500 pixels.
config.height = '25em';     // CSS length.
config.height = '300px';    // CSS length.

Defaults to: 200

Whether to escape HTML when the editor updates the original input element.

config.htmlEncodeOutput = true;

Defaults to: false

Available since: 3.1

Whether the editor must output an empty value ('') if its content only consists of an empty paragraph.

config.ignoreEmptyParagraph = false;

Defaults to: true

CSS classes applied to aligned images. Useful to take control over the way the images are aligned, i.e. to customize output HTML and integrate external stylesheets.

Classes should be defined in an array of three elements, containing left, center, and right alignment classes, respectively. For example:

config.image2_alignClasses = [ 'align-left', 'align-center', 'align-right' ];

Note: Once this configuration option is set, the plugin will no longer produce inline styles for alignment. It means that e.g. the following HTML will be produced:

<img alt="My image" class="custom-center-class" src="foo.png" />

instead of:

<img alt="My image" style="float:left" src="foo.png" />

Note: Once this configuration option is set, corresponding style definitions must be supplied to the editor:

• For classic editor it can be done by defining additional styles in the stylesheets loaded by the editor. The same styles must be provided on the target page where the content will be loaded.
• For inline editor the styles can be defined directly with <style> ... <style> or <link href="..." rel="stylesheet">, i.e. within the <head> of the page.

For example, considering the following configuration:

config.image2_alignClasses = [ 'align-left', 'align-center', 'align-right' ];

CSS rules can be defined as follows:

.align-left {
    float: left;
}

.align-right {
    float: right;
}

.align-center {
    text-align: center;
}

.align-center > figure {
    display: inline-block;
}

Read more in the documentation and see the SDK sample.

Defaults to: null

Available since: 4.4

Determines whether alternative text is required for the captioned image.

config.image2_altRequired = true;

Read more in the documentation and see the SDK sample.

Defaults to: false

Available since: 4.6.0

A CSS class applied to the <figure> element of a captioned image.

Read more in the documentation and see the SDK sample.

// Changes the class to "captionedImage".
config.image2_captionedClass = 'captionedImage';

Defaults to: 'image'

Disables the image resizer. By default the resizer is enabled.

Read more in the documentation and see the SDK sample.

config.image2_disableResizer = true;

Defaults to: false

Available since: 4.5

Determines whether dimension inputs should be automatically filled when the image URL changes in the Enhanced Image plugin dialog window.

Read more in the documentation and see the SDK sample.

config.image2_prefillDimensions = false;

Defaults to: true

Available since: 4.5

The URL where images should be uploaded.

Defaults to: '' (empty string = disabled)

Available since: 4.5

Determines whether dimension inputs should be automatically filled when the image URL changes in the Image plugin dialog window.

config.image_prefillDimensions = false;

Defaults to: true

Available since: 4.5

Padding text to set off the image in the preview area.

config.image_previewText = CKEDITOR.tools.repeat( '___ ', 100 );

Defaults to: 'Lorem ipsum dolor...' (placeholder text)

Whether to remove links when emptying the link URL field in the Image dialog window.

config.image_removeLinkByEmptyURL = false;

Defaults to: true

A list of classes to use for indenting the contents. If set to null, no classes will be used and instead the indentUnit and indentOffset properties will be used.

// Use the 'Indent1', 'Indent2', 'Indent3' classes.
config.indentClasses = ['Indent1', 'Indent2', 'Indent3'];

Defaults to: null

The size in indentation units of each indentation step.

config.indentOffset = 4;

Defaults to: 40

The unit used for indentation offset.

config.indentUnit = 'em';

Defaults to: 'px'

Allows CKEditor to override jQuery.fn.val(). When set to true, the val() function used on textarea elements replaced with CKEditor uses the CKEditor API.

This configuration option is global and is executed during the loading of the jQuery Adapter. It cannot be customized across editor instances.

Read more in the documentation.

<script>
    CKEDITOR.config.jqueryOverrideVal = true;
</script>

<!-- Important: The jQuery Adapter is loaded *after* setting jqueryOverrideVal. -->
<script src="/ckeditor/adapters/jquery.js"></script>

<script>
    $( 'textarea' ).ckeditor();
    // ...
    $( 'textarea' ).val( 'New content' );
</script>

Defaults to: true

List of classes to use for aligning the contents. If it's null, no classes will be used and instead the corresponding CSS values will be used.

The array should contain 4 members, in the following order: left, center, right, justify.

// Use the classes 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify'
config.justifyClasses = [ 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' ];

Defaults to: null

A list associating keystrokes with editor commands. Each element in the list is an array where the first item is the keystroke, and the second is the name of the command to be executed.

This setting should be used to define (as well as to overwrite or remove) keystrokes set by plugins (like link and basicstyles). If you want to set a keystroke for your plugin or during the runtime, use CKEDITOR.editor.setKeystroke instead.

Since default keystrokes are set by the CKEDITOR.editor.setKeystroke method, by default config.keystrokes is an empty array.

See CKEDITOR.editor.setKeystroke documentation for more details regarding the start up order.

// Change default Ctrl+L keystroke for 'link' command to Ctrl+Shift+L.
config.keystrokes = [
    ...
    [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 76, 'link' ],    // Ctrl+Shift+L
    ...
];

To reset a particular keystroke, the following approach can be used:

// Disable default Ctrl+L keystroke which executes the 'link' command by default.
config.keystrokes = [
    ...
    [ CKEDITOR.CTRL + 76, null ],                       // Ctrl+L
    ...
];

In order to reset all default keystrokes, a CKEDITOR.instanceReady callback should be used. This is since editor defaults are merged rather than overwritten by user keystrokes.

Note: This can be potentially harmful for the editor. Avoid this unless you are aware of the consequences.

// Reset all default keystrokes.
config.on.instanceReady = function() {
    this.keystrokeHandler.keystrokes = [];
};

Defaults to: []

The user interface language localization to use. If left empty, the editor will automatically be localized to the user language. If the user language is not supported, the language specified in the defaultLanguage configuration setting is used.

Read more in the documentation and see the SDK sample.

// Load the German interface.
config.language = 'de';

Defaults to: ''

Specifies the list of languages available in the Language plugin. Each entry should be a string in the following format:

<languageCode>:<languageLabel>[:<textDirection>]

• languageCode: The language code used for the lang attribute in ISO 639 format. Language codes can be found here. You can use both 2-letter ISO-639-1 codes and 3-letter ISO-639-2 codes, though for consistency it is recommended to stick to ISO-639-1 2-letter codes.
• languageLabel: The label to show for this language in the list.
• textDirection: (optional) One of the following values: rtl or ltr, indicating the reading direction of the language. Defaults to ltr.

See the SDK sample.

config.language_list = [ 'he:Hebrew:rtl', 'pt:Portuguese', 'de:German' ];

Defaults to: [ 'ar:Arabic:rtl', 'fr:French', 'es:Spanish' ]

Whether JavaScript code is allowed as a href attribute in an anchor tag. With this option enabled it is possible to create links like:

<a href="javascript:alert('Hello world!')">hello world</a>

By default JavaScript links are not allowed and will not pass the Link dialog window validation.

Defaults to: false

Available since: 4.4.1

Whether to show the Advanced tab in the Link dialog window.

Defaults to: true

Whether to show the Target tab in the Link dialog window.

Defaults to: true

Defines the color of the magic line. The color may be adjusted to enhance readability.

Read more in the documentation and see the SDK sample.

// Changes magic line color to blue.
CKEDITOR.config.magicline_color = '#0000FF';

Defaults to: '#FF0000'

Activates the special all-encompassing mode that considers all focus spaces between CKEDITOR.dtd.$block elements as accessible by the magic line.

Read more in the documentation and see the SDK sample.

// Enables the greedy "put everywhere" mode.
CKEDITOR.config.magicline_everywhere = true;

Defaults to: false

Defines the distance between the mouse pointer and the box within which the magic line stays revealed and no other focus space is offered to be accessed. This value is relative to magicline_triggerOffset.

Read more in the documentation and see the SDK sample.

// Increases the distance to 80% of CKEDITOR.config.magicline_triggerOffset.
CKEDITOR.config.magicline_holdDistance = .8;CKEDITOR.config.magicline_triggerOffset

Defaults to: 0.5

Defines the default keystroke that accesses the closest unreachable focus space after the caret (start of the selection). If there is no focus space available, the selection remains unchanged.

Read more in the documentation and see the SDK sample.

// Changes keystroke to "Ctrl + .".
CKEDITOR.config.magicline_keystrokeNext = CKEDITOR.CTRL + 190;

Defaults to: CKEDITOR.CTRL + CKEDITOR.SHIFT + 52 (CTRL + SHIFT + 4)

Defines the default keystroke that accesses the closest unreachable focus space before the caret (start of the selection). If there is no focus space available, the selection remains unchanged.

Read more in the documentation and see the SDK sample.

// Changes the default keystroke to "Ctrl + ,".
CKEDITOR.config.magicline_keystrokePrevious = CKEDITOR.CTRL + 188;

Defaults to: CKEDITOR.CTRL + CKEDITOR.SHIFT + 51 (CTRL + SHIFT + 3)

Defines a list of attributes that, if assigned to some elements, prevent the magic line from being used within these elements.

Read more in the documentation and see the SDK sample.

// Adds the "data-tabu" attribute to the magic line tabu list.
CKEDITOR.config.magicline_tabuList = [ 'data-tabu' ];

Defaults to: [ 'data-widget-wrapper' ]

Sets the default vertical distance between the edge of the element and the mouse pointer that causes the magic line to appear. This option accepts a value in pixels, without the unit (for example: 15 for 15 pixels).

Read more in the documentation and see the SDK sample.

// Changes the offset to 15px.
CKEDITOR.config.magicline_triggerOffset = 15;CKEDITOR.config.magicline_holdDistance

Defaults to: 30

Sets the default class for span elements that will be converted into Mathematical Formulas widgets.

If you set it to the following:

config.mathJaxClass = 'my-math';

The code below will be recognized as a Mathematical Formulas widget.

<span class="my-math">\( \sqrt{4} = 2 \)</span>

Read more in the documentation and see the SDK sample.

Defaults to: 'math-tex'

Sets the path to the MathJax library. It can be both a local resource and a location different than the default CDN.

Please note that this must be a full or absolute path.

Read more in the documentation and see the SDK sample.

config.mathJaxLib = '//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML';

Note: Since CKEditor 4.5 this option does not have a default value, so it must be set in order to enable the MathJax plugin.

Available since: 4.3

A comma separated list of items group names to be displayed in the context menu. The order of items will reflect the order specified in this list if no priority was defined in the groups.

config.menu_groups = 'clipboard,table,anchor,link,image';

Defaults to: see source

The amount of time, in milliseconds, the editor waits before displaying submenu options when moving the mouse over options that contain submenus, like the "Cell Properties" entry for tables.

// Remove the submenu delay.
config.menu_subMenuDelay = 0;

Defaults to: 400

The HTML to load in the editor when the "new page" command is executed.

config.newpage_html = '<p>Type your text here.</p>';

Defaults to: ''

After how many milliseconds the notification of the info and success type should close automatically. 0 means that notifications will not close automatically. Note that warning and progress notifications will never close automatically.

Refer to the Notifications article for more information about this feature.

Defaults to: 5000

Available since: 4.5

Sets listeners on editor events.

Note: This property can only be set in the config object passed directly to CKEDITOR.replace, CKEDITOR.inline, and other creators.

CKEDITOR.replace( 'editor1', {
    on: {
        instanceReady: function() {
            alert( this.name ); // 'editor1'
        },

        key: function() {
            // ...
        }
    }
} );

Defines a filter which is applied to external data pasted or dropped into the editor. Possible values are:

• 'plain-text' – Content will be pasted as a plain text.
• 'semantic-content' – Known tags (except div, span) with all attributes (except style and class) will be kept.
• 'h1 h2 p div' – Custom rules compatible with CKEDITOR.filter.
• null – Content will not be filtered by the paste filter (but it still may be filtered by Advanced Content Filter). This value can be used to disable the paste filter in Chrome and Safari, where this option defaults to 'semantic-content'.

Example:

config.pasteFilter = 'plain-text';

Custom setting:

config.pasteFilter = 'h1 h2 p ul ol li; img[!src, alt]; a[!href]';

Based on this configuration option, a proper CKEDITOR.filter instance will be defined and assigned to the editor as a CKEDITOR.editor.pasteFilter. You can tweak the paste filter settings on the fly on this object as well as delete or replace it.

var editor = CKEDITOR.replace( 'editor', {
    pasteFilter: 'semantic-content'
} );

editor.on( 'instanceReady', function() {
    // The result of this will be that all semantic content will be preserved
    // except tables.
    editor.pasteFilter.disallow( 'table' );
} );

Note that the paste filter is applied only to external data. There are three data sources:

• copied and pasted in the same editor (internal),
• copied from one editor and pasted into another (cross-editor),
• coming from all other sources like websites, MS Word, etc. (external).

If Advanced Content Filter is not disabled, then it will also be applied to pasted and dropped data. The paste filter job is to "normalize" external data which often needs to be handled differently than content produced by the editor.

This setting defaults to 'semantic-content' in Chrome, Opera and Safari (all Blink and Webkit based browsers) due to messy HTML which these browsers keep in the clipboard. In other browsers it defaults to null.

Defaults to: 'semantic-content' in Chrome and Safari and `null` in other browsers

Available since: 4.5

The file that provides the Microsoft Word cleanup function for pasting operations.

Note: This is a global configuration shared by all editor instances present on the page.

//
 Load from the 'pastefromword' plugin 'filter' sub folder (custom.js 
file) using a path relative to the CKEditor installation folder.
CKEDITOR.config.pasteFromWordCleanupFile = 'plugins/pastefromword/filter/custom.js';

// Load from the 'pastefromword' plugin 
'filter' sub folder (custom.js file) using a full path (including the 
CKEditor installation folder).
CKEDITOR.config.pasteFromWordCleanupFile = '/ckeditor/plugins/pastefromword/filter/custom.js';

// Load custom.js file from the 'customFilters' folder (located in server's root) using the full URL.
CKEDITOR.config.pasteFromWordCleanupFile = 'http://my.example.com/customFilters/custom.js';

Defaults to: <plugin path> + 'filter/default.js'

Available since: 3.1

Whether to transform Microsoft Word outline numbered headings into lists.

config.pasteFromWordNumberedHeadingToList = true;

Defaults to: false

Available since: 3.1

Whether to prompt the user about the clean up of content being pasted from Microsoft Word.

config.pasteFromWordPromptCleanup = true;

Defaults to: false

Available since: 3.1

Whether to ignore all font-related formatting styles, including:

• font size;
• font family;

• font foreground and background color.

  config.pasteFromWordRemoveFontStyles = true;

Important note: Prior to version 4.6.0 this configuration option defaulted to true.

Defaults to: false

Available since: 3.1

Whether to remove element styles that cannot be managed with the editor. Note that this option does not handle font-specific styles, which depend on the pasteFromWordRemoveFontStyles setting instead.

config.pasteFromWordRemoveStyles = false;

Defaults to: true

Available since: 3.1

Activates a heuristic that helps detect lists pasted into the editor in Microsoft Edge.

The reason why this heuristic is needed is that on pasting Microsoft Edge removes any Word-specific metadata allowing to identify lists.

// Disables list heuristics for Edge.
config.pasteFromWord_heuristicsEdgeList = false;

Defaults to: true

Available since: 4.6.2

Comma-separated list of plugins to be used in an editor instance. Note that the actual plugins that are to be loaded could still be affected by two other settings: extraPlugins and removePlugins.

Defaults to: "<default list of plugins>"

A list of regular expressions to be executed on input HTML, indicating HTML source code that when matched, must not be available in the WYSIWYG mode for editing.

config.protectedSource.push( /<\?[\s\S]*?\?>/g );                                           // PHP code
config.protectedSource.push( /<%[\s\S]*?%>/g );                                             // ASP code
config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi );  // ASP.NET code

Defaults to: []

If true, makes the editor start in read-only state. Otherwise, it will check if the linked <textarea> element has the disabled attribute.

Read more in the documentation and see the SDK sample.

config.readOnly = true;CKEDITOR.editor.setReadOnly

Defaults to: false

Available since: 3.6

List of toolbar button names that must not be rendered. This will also work for non-button toolbar items, like the Font drop-down list.

config.removeButtons = 'Underline,JustifyCenter';

This configuration option should not be overused. The recommended way is to use the removePlugins setting to remove features from the editor or even better, create a custom editor build with just the features that you will use. In some cases though, a single plugin may define a set of toolbar buttons and removeButtons may be useful when just a few of them are to be removed.

The dialog contents to removed. It's a string composed by dialog name and tab name with a colon between them.

Separate each pair with semicolon (see example).

Note: All names are case-sensitive.

Note: Be cautious when specifying dialog tabs that are mandatory, like 'info', dialog functionality might be broken because of this!

config.removeDialogTabs = 'flash:advanced;image:Link';

Defaults to: ''

Available since: 3.5

A comma separated list of elements attributes to be removed when executing the remove format command.

Defaults to: 'class,style,lang,width,height,align,hspace,valign'

A comma separated list of elements to be removed when executing the remove format command. Note that only inline elements are allowed.

Defaults to: 'b,big,cite,code,del,dfn,em,font,i,ins,kbd,q,s,samp,small,span,strike,strong,sub,sup,tt,u,var'

A list of plugins that must not be loaded. This setting makes it possible to avoid loading some plugins defined in the plugins setting without having to touch it.

Note: A plugin required by another plugin cannot be removed and will cause an error to be thrown. So for example if contextmenu is required by tabletools, it can only be removed if tabletools is not loaded.

config.removePlugins = 'elementspath,save,font';

Defaults to: ''

The dimensions for which the editor resizing is enabled. Possible values are both, vertical, and horizontal.

Read more in the documentation and see the SDK sample.

config.resize_dir = 'both';

Defaults to: 'vertical'

Available since: 3.3

Whether to enable the resizing feature. If this feature is disabled, the resize handle will not be visible.

Read more in the documentation and see the SDK sample.

config.resize_enabled = false;

Defaults to: true

The maximum editor height, in pixels, when resizing the editor interface by using the resize handle.

Read more in the documentation and see the SDK sample.

config.resize_maxHeight = 600;

Defaults to: 3000

The maximum editor width, in pixels, when resizing the editor interface by using the resize handle.

Read more in the documentation and see the SDK sample.

config.resize_maxWidth = 750;

Defaults to: 3000

The minimum editor height, in pixels, when resizing the editor interface by using the resize handle. Note: It falls back to editor's actual height if it is smaller than the default value.

Read more in the documentation and see the SDK sample.

config.resize_minHeight = 600;

Defaults to: 250

The minimum editor width, in pixels, when resizing the editor interface by using the resize handle. Note: It falls back to editor's actual width if it is smaller than the default value.

Read more in the documentation and see the SDK sample.

config.resize_minWidth = 500;

Defaults to: 750

Automatically enables SCAYT on editor startup. When set to true, this option turns on SCAYT automatically after loading the editor.

Read more in the documentation and see the SDK sample.

config.scayt_autoStartup = true;

Defaults to: false

Customizes the display of SCAYT context menu commands ("Add Word", "Ignore", "Ignore All", "Options", "Languages", "Dictionaries" and "About"). This must be a string with one or more of the following words separated by a pipe character ('|'):

• off – Disables all options.
• all – Enables all options.
• ignore – Enables the "Ignore" option.
• ignoreall – Enables the "Ignore All" option.
• add – Enables the "Add Word" option.
• option – Enables the "Options" menu item.
• language – Enables the "Languages" menu item.
• dictionary – Enables the "Dictionaries" menu item.
• about – Enables the "About" menu item.

Please note that availability of the "Options", "Languages" and "Dictionaries" items also depends on the scayt_uiTabs option.

Read more in the documentation and see the SDK sample.

Example:

// Show only "Add Word" and "Ignore All" in the context menu.
config.scayt_contextCommands = 'add|ignoreall';

Defaults to: 'ignore|ignoreall|add'